<template>
  <!--字典管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="add">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--公用-->
    <div v-show="public">
      <div class="add_style">
        <span>类型:</span>
        <Select v-model="Param.type" style="width:620px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="add_style">
        <span>名称:</span>
        <Input v-model="Param.value" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>状态:</span>
        <i-switch v-model="Param.status" size="large">
          <span slot="open">开启</span>
          <span slot="close">禁用</span>
        </i-switch>
      </div>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="save">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="save1">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>

  </div>
</template>

<script>
  import paging from '../module/paging.vue';
    export default {
      components: {
        paging
      },
      data() {
        return {
          /*URL*/
          URL: this.$api.url,
          /*分页*/
          all: 1,
          cur: 1,
          /*表格*/
          columns: [
            {
              title: '编号',
              key: 'id',
              align: 'center',
            },
            {
              title: '类型',
              key: 'type',
            },
            {
              title: '名称',
              key: 'value',
            },
            {
              title: '状态',
              key: '状态',
              width: 100,
              align: 'center',
              render:(h,params)=>{
                let periodical = "";
                if(params.row.status == true){
                  periodical="开启";
                }else{
                  periodical="禁用";
                }
                return h('span',{
                },periodical)
              }
            },
            {
              title: '操作',
              key: '操作',
              width: 200,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.show(params.index);
                      }
                    }
                  }, '编辑'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.remove(params.index)
                      }
                    }
                  }, '删除'),
                ]);
              }
            },
          ],
          data:[],
          /*隐藏显示*/
          table:true,
          table2:false,
          public:false,
          addBtn:false,
          compileBtn:false,
          /*参数*/
          Param:{
            id:'',
            type:'',
            value:'',
            status:false,
            createUser:'',
          },
          cityList: []
        }
      },
      mounted() {
        window.scrollTo(0,0);
        this.Param.createUser = localStorage.getItem('ms_userid');
        /*查询表格*/
        this.get(this.URL+'/dictionary/adminDictionary/',this.cur)
      },
      methods: {
        /*分页*/
        returnValue(data) {
          this.cur = data;
          this.get(this.URL+'/dictionary/adminDictionary/',this.cur)
        },
        /*删除*/
        remove(index){
          this.$axios.get(this.URL+'/dictionary/adminDelDic/'+this.data[index].id).then((res) => {
            this.get(this.URL+'/dictionary/adminDictionary/',this.cur)
          });
        },
        /*添加保存*/
        save(){
          this.post(this.Param,this.URL+'/dictionary/adminAddDic')
        },
        /*编辑*/
        show(index){
          this.table = false;
          this.table2 = true;
          this.public = true;
          this.compileBtn = true;
          this.$axios.get(this.URL+'/dictionary/AllType').then((res) => {
            for(let i in res.data.data){
              this.cityList.push({
                value:res.data.data[i].type,
                label:res.data.data[i].type,
              })
            }
          });
          this.Param.id = this.data[index].id;
          this.Param.type = this.data[index].type;
          this.Param.value = this.data[index].value;
          this.Param.status = this.data[index].status;
        },
        save1(){
          this.post(this.Param,this.URL+'/dictionary/adminUpDic')
        },
        /*添加*/
        add(){
          this.table = false;
          this.table2 = true;
          this.public = true;
          this.addBtn = true;
          this.$axios.get(this.URL+'/dictionary/AllType').then((res) => {
            for(let i in res.data.data){
              this.cityList.push({
                value:res.data.data[i].type,
                label:res.data.data[i].type,
              })
            }
          });
        },
        /*返回*/
        back(){
          this.$router.go(0)
        },
        /*axios请求*/
        post(data,url) {
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(data),
            url: url,
          }).then((res) => {
            this.$router.go(0)
          })
        },
        get(url, cur) {
          let _this = this;
          this.$axios.get(url + cur).then((res) => {
            this.all = res.data.totalPage;
            this.data = [];
            for(let i in res.data.combined_if){
              _this.data.push(res.data.combined_if[i])
            }
            for(let i in res.data.level){
              _this.data.push(res.data.level[i])
            }
            for(let i in res.data.publication_cycle){
              _this.data.push(res.data.publication_cycle[i])
            }
          });
        },
      }
    }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }
  .add_style {
    padding-bottom: 10px;
  }
  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
  }
</style>
